<template>
  <view class="video-player-item">
    <!-- 图片 -->
    <image :src="videoInfo.data.coverUrl" mode="" class="imgcover" v-if="!isPlay"></image>
    <!-- 视频 -->
    <video
      loop
      :id="videoInfo.data.vid"
      v-else
      :src="videoInfo.data.urlInfo.url"
      controls
      class="video-style"
      :show-fullscreen-btn="false"
      :show-play-btn="false"
      :show-loading="false"
      object-fit="cover"
      :show-center-play-btn="false"
      @pause="videoPause"
      @play="videoPlay"
      @click="videoContextPauseOrChangeLove(videoInfo)"
    ></video>
    <!-- 屏幕上的点击播放按钮 -->
    <play-control @click.native="PlayVideo" v-show="isIconfontPlayShow"></play-control>
    <!-- 侧边栏菜单 -->
    <sider-bar :videoInfo="videoInfo" :isIconfontPlayShow="isIconfontPlayShow"></sider-bar>
    <!-- video的详情 -->
    <video-detail-bar v-show="!isIconfontPlayShow" :videoInfo="videoInfo"></video-detail-bar>
  </view>
</template>

<script>
import SiderBar from './SideBar.vue'
import PlayControl from './PlayControl.vue'
import VideoDetailBar from './VideoDetailBar.vue'
export default {
  name: 'VideoPlayer',
  components: { PlayControl, SiderBar, VideoDetailBar },
  props: {
    videoInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      //控制图片和视频的切换
      isPlay: false,
      // 视频详情
      videoContext: {},
      // 控制是否显示iconfont播放图标
      isIconfontPlayShow: true,
      //300ms的定时器用来判断单击还是双击
      timer: null,
      // 判断单击还是双击
      dbClick: false
    }
  },
  methods: {
    // 监听iconfont 点击事件
    PlayVideo(type) {
      this.isPlay = true
      if (type === 'swich') {
        this.videoContext.seek(0)
      }
      this.isIconfontPlayShow = false
      this.videoContext.play()
      getApp().globalData.globalVideoPlay = this.videoContext
    },
    // 监听视频暂停事件
    videoPause() {
      this.isIconfontPlayShow = true
    },
    //监听视频播放事件
    videoPlay() {
      this.isIconfontPlayShow = false
    },
    // 判断是单击还是双击事件
    videoContextPauseOrChangeLove({ data }) {
      this.dbClick = !this.dbClick
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.dbClick) {
          this.videoContext.pause()
        } else {
          this.$bus.$emit('changeLove',data.vid)
        }
        this.dbClick = false
      }, 300)
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext(this.videoInfo.data.vid, this)
    if (this.index === 0) this.PlayVideo()
  }
}
</script>

<style lang="scss" scoped>
.video-player-item {
  height: 100vh;
  width: 100vw;
  .video-style {
    height: 100%;
    width: 100%;
  }
  .imgcover {
    height: 100%;
    width: 100%;
  }
}
</style>
